import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col, Input, Checkbox, message, Button, Icon,Switch } from 'antd';
import request from '../../utils/request';
import config from '../../../config';
import md5 from 'blueimp-md5';
import PublicService from '../../services/PublicService';
import style from './logo.1.less';

class Login extends Component {

  state = {
    codeUrl: '/zhrq-web/orguser/login/getSignCode',
    userName:'',
    password:'',
    v_verifyCode:''
  };

  componentDidMount() {
    this.refreshCode();
  }

  refreshCode () {
    let t = this;
    t.setState({
      codeUrl: `${t.state.codeUrl}?t=${new Date().getTime()}`
    });
  }



  onValue = (val,e) => {
    console.log(e.target.value)
    this.setState({
      [val]:e.target.value
    })
  }
  onGo = () => {

    if(this.state.userName.length < 1) {
      return message.warning("请输入用户名")
    }

    if(this.state.password.length < 1) {
      return message.warning("请输入密码")
    }

    if(this.state.v_verifyCode.length < 1) {
      return message.warning("请输入验证码")
    }

    let data = {
      password:md5(this.state.password),
      rememberMe:false,
      rememberMeId:'',
      userName:this.state.userName,
      v_verifyCode:this.state.v_verifyCode
    }
    request({
      url: '/zhrq-web/orguser/login/login',
      method: 'POST',
      data:data
    }).then(data => {
      console.log(data)
      if(data.rc == 0) {
        message.success("登录成功!")
        PublicService.setCookie("roleId",4)
        this.props.history.push('/Supply');
      }else {
        message.warning(data.err)
      }

    })
  }

  render() {
    const t = this
    return (
      <div className={style.bg}>
        <div className={style.bg_top}>
          <div className={style.bgtop_L}>
          <img src={require('../../assets/logo2.png')} style={{ width: "100%" }} />
          </div>
          <div className={style.bgtop_R}>
            <div className={style.bgtop_z}>
              武汉市武昌区燃气安全监管平台_企业端
            </div>
            <div className={style.bgtop_y}>
              Gas Safety Supervision Platform in Wuchang District of Wuhan City
            </div>
          </div>
        </div>


        <div className={style.bg_moddle}>
         
          <div className={style.bgmoddle_b}>
          <div className={style.clire}>
            <img src={require("../../assets/zf.png")} style={{ width: 80, height: 80, opacity: 1 }} />
          </div>
            <div>
              <p>用户名 : </p>
              <input className={style.item_name} value={this.state.userName} onChange={this.onValue.bind(this,'userName')}/>
            </div>
            <div>
              <p>密码 : </p>
              <input className={style.item_name} value={this.state.password} type='password' onChange={this.onValue.bind(this,'password')}/>
            </div>
            <div>
              <p>验证码 : </p>
              <input className={style.item_name} style={{width:100}} value={this.state.v_verifyCode} onChange={this.onValue.bind(this,'v_verifyCode')}/> <img onClick={this.refreshCode.bind(this)}  style={{width:116,height:32}} src={t.state.codeUrl}/>
            </div>
            <Button type="primary" style={{width:220}} onClick={this.onGo}>登录</Button>
            <div className={style.duber}>
            <div>
            <Switch size='small' checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="close" />} defaultChecked /><span>记住密码</span>
            </div>
            <div>
            <Switch size='small' checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="close" />} defaultChecked /><span>自动登录</span>
            </div>
            


            </div>
          </div>
        </div>


        <div className={style.bg_bottom}>
          <div>
            版权所有：苏州市伏泰信息科技股份有限公司
          </div>
          <div>
            技术支持：苏州市伏泰信息科技股份有限公司
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    nav: state
  };
}

export default connect(mapStateToProps)(Login);


